<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>后海能碳驾驶舱DEMO</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
	  html {
	    font-size: 12px;
	  }
	  .amap-copyright{
	    box-sizing: content-box
	  }
	  * {
	    box-sizing: border-box
	  }
	  .input-textarea{
	     color:grey;
	     height:8em;
	     overflow:auto;
	     border-radius:0.4rem;
	     border:1px solid #ced4da;
	     margin-bottom:1rem;
	  }
	  body {
	    margin: 0;
	    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	    line-height: 1.5;
	    font-weight: 300;
	    color: #111213;
	  }
	  
	  hr {
	    margin: 0.5rem 0;
	    box-sizing: content-box;
	    height: 0;
	    overflow: visible;
	    border: 0;
	    border-top: 1px solid rgba(0, 0, 0, .1)
	  }
	  
	  p {
	    margin-top: 0;
	    margin-bottom: 0;
	  }
	  
	  label {
	    display: inline-block;
	    margin-bottom: 0.4rem;
	  }
	  
	  label, .btn {
	    margin-left: 0;
	    font-size: 1rem;
	  }
	  
	  button, input, select {
	    margin: 0;
	    font-family: inherit;
	    font-size: inherit;
	    line-height: inherit;
	    overflow: visible;
	    text-transform: none
	  }
	  
	  [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
	    padding: 0;
	    border-style: none;
	  }
	  
	  input[type=checkbox], input[type=radio] {
	    box-sizing: border-box;
	    padding: 0;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    padding: 0;
	    margin: 0 0.5rem 0 0;
	  }
	  
	  h4 {
	    font-family: inherit;
	    line-height: 1.8;
	    font-weight: 300;
	    color: inherit;
	    font-size: 1.1rem;
	    margin-top: 0;
	    margin-bottom: .5rem
	  }
	  
	  .btn {
	    display: inline-block;
	    font-weight: 400;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: middle;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    border: 1px solid transparent;
	    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	    background-color: transparent;
	    background-image: none;
	    color: #25A5F7;
	    border-color: #25A5F7;
	    padding: .25rem .5rem;
	    line-height: 1.5;
	    border-radius: 1rem;
	    -webkit-appearance: button;
	    cursor:pointer;
	  }
	  
	  .btn:hover {
	    color: #fff;
	    background-color: #25A5F7;
	    border-color: #25A5F7
	  }
	  
	  .btn:hover {
	    text-decoration: none
	  }
	  
	  .input-item {
	    position: relative;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    -ms-flex-align: center;
	    align-items: center;
	    width: 100%;
	    height: 3rem;
	  }
	  
	  .input-item:last-child {
	    margin-bottom: 0;
	  }
	  
	  .input-item>select, .input-item>input[type=text], .input-item>input[type=date] {
	    position: relative;
	    -ms-flex: 1 1 auto;
	    flex: 1 1 auto;
	    width: 1%;
	    margin-bottom: 0;
	  }
	  
	  .input-item>select:not(:last-child), .input-item>input[type=text]:not(:last-child), .input-item>input[type=date]:not(:last-child) {
	    border-top-right-radius: 0;
	    border-bottom-right-radius: 0
	  }
	  
	  .input-item>select:not(:first-child), .input-item>input[type=text]:not(:first-child), .input-item>input[type=date]:not(:first-child) {
	    border-top-left-radius: 0;
	    border-bottom-left-radius: 0
	  }
	  
	  .input-item-prepend {
	    margin-right: -1px;
	  }
	  
	  .input-item-text, input[type=text],input[type=date], select {
	    height: calc(2.2rem + 2px);
	  }
	  
	  .input-item-text {
	    width: 6rem;
	    text-align: justify;
	    padding: 0.4rem 0.7rem;
	    display: inline-block;
	    text-justify: distribute-all-lines;
	    /*ie6-8*/
	    text-align-last: justify;
	    /* ie9*/
	    -moz-text-align-last: justify;
	    /*ff*/
	    -webkit-text-align-last: justify;
	    /*chrome 20+*/
	    -ms-flex-align: center;
	    align-items: center;
	    margin-bottom: 0;
	    font-size: 1rem;
	    font-weight: 400;
	    line-height: 1.5;
	    color: #495057;
	    text-align: center;
	    white-space: nowrap;
	    background-color: #e9ecef;
	    border: 1px solid #ced4da;
	    border-radius: .25rem;
	    border-bottom-right-radius: 0;
	    border-top-right-radius: 0;
	  }
	  
	  .input-item-text input[type=checkbox], .input-item-text input[type=radio] {
	    margin-top: 0
	  }
	  
	  .input-card {
	    display: flex;
	    flex-direction: column;
	    min-width: 0;
	    word-wrap: break-word;
	    background-color: #fff;
	    background-clip: border-box;
	    border-radius: .25rem;
	    width: 22rem;
	    border-width: 0;
	    border-radius: 0.4rem;
	    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
	    position: fixed;
	    bottom: 1rem;
	    right: 1rem;
	    -ms-flex: 1 1 auto;
	    flex: 1 1 auto;
	    padding: 0.75rem 1.25rem;
	  }
	  
	  .input-text {
	    line-height: 2rem;
	    margin-right: 2rem;
	  }
	  
	  .info hr {
	    margin-right: 0;
	    margin-left: 0;
	    border-top-color: grey;
	  }
	  
	  .info {
	    padding: .75rem 1.25rem;
	    margin-bottom: 1rem;
	    border-radius: .25rem;
	    position: fixed;
	    top: 1rem;
	    background-color: white;
	    width: auto;
	    min-width: 22rem;
	    border-width: 0;
	    right: 1rem;
	    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
	  }
	  
	  .code {
	    left: 1.5rem;
	    right: 1.5rem;
	    top: 1.5rem;
	    bottom: 1.5rem;
	    overflow: auto;
	    margin-bottom: 0rem;
	  }
	  
	  .code .btn {
	    top: 1rem;
	    position: absolute;
	    right: 1rem;
	  }
	  
	  .code .result {
	    border: 1px solid rgba(0, 0, 0, 0.1);
	    border-radius: 0.5rem;
	    padding: 1rem;
	    bottom: 1rem;
	    position: absolute;
	    top: 5.5rem;
	    right: 1rem;
	    left: 1rem;
	    overflow: auto;
	  }
	  
	  .code .status {
	    color: #80adff;
	    display: inline-block;
	    font-size: 14px;
	  }
	  
	  .code h4 {
	    display: inline-block;
	    max-width: 20rem;
	    margin-right: 1rem;
	    margin-bottom: 1rem;
	  }
	  
	  select, input[type=text], input[type=date] {
	    display: inline-block;
	    width: 100%;
	    padding: .375rem 1.75rem .375rem .75rem;
	    line-height: 1.5;
	    color: #495057;
	    vertical-align: middle;
	    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
	    background-size: 8px 10px;
	    border: 1px solid #ced4da;
	    border-radius: .25rem;
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none
	  }
	  
	  input[type=text],input[type=date] {
	    background: #fff;
	    padding: .375rem .75rem;
	  }
	  
	  select:focus, input[type=text]:focus, input[type=date]:focus {
	    border-color: #80bdff;
	    outline: 0;
	    box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
	  }
	  
	  .btn:focus {
	    outline: 0;
	    box-shadow: none;
	  }
	  
	  select:focus::-ms-value, input[type=text]:focus::-ms-value,input[type=date]:focus::-ms-value {
	    color: #495057;
	    background-color: #fff
	  }
	  
	  
	  /* native toastr */
	  .native-toast {
	    position: fixed;
	    background-color: rgba(50, 50, 50, .8);
	    border-radius: 33px;
	    color: white;
	    left: 50%;
	    text-align: center;
	    padding: 6px 12px;
	    opacity: 0;
	    z-index: 99999;
	    transition: transform .25s, opacity .25s, top .25s;
	    box-sizing: border-box;
	  }
	  
	  .native-toast-bottom {
	    bottom: 50px;
	    -ms-transform: translateX(-50%) translateY(50px);
	        transform: translateX(-50%) translateY(50px)
	  }
	  
	  .native-toast-bottom.native-toast-shown {
	    opacity: 1;
	    -ms-transform: translateX(-50%) translateY(0);
	        transform: translateX(-50%) translateY(0);
	  }
	  
	  .native-toast-bottom.native-toast-edge {
	    bottom: 0;
	  }
	  
	  .native-toast-top {
	    top: 50px;
	    -ms-transform: translateX(-50%) translateY(-50px);
	        transform: translateX(-50%) translateY(-50px)
	  }
	  
	  .native-toast-top.native-toast-shown {
	    opacity: 1;
	    -ms-transform: translateX(-50%) translateY(0);
	        transform: translateX(-50%) translateY(0);
	  }
	  
	  .native-toast-top.native-toast-edge {
	    top: 0;
	  }
	  
	  .native-toast-center {
	    top: 0;
	    -ms-transform: translateX(-50%) translateY(-50px);
	        transform: translateX(-50%) translateY(-50px)
	  }
	  
	  .native-toast-center.native-toast-shown {
	    opacity: 1;
	    top: 50%;
	    -ms-transform: translateX(-50%) translateY(-50%);
	        transform: translateX(-50%) translateY(-50%);
	  }
	  
	  .native-toast-edge {
	    border-radius: 0;
	    width: 100%;
	    text-align: left;
	  }
	  
	  @media screen and (min-width: 40rem) {
	    .native-toast:not(.native-toast-edge) {
	      max-width: 18rem;
	    }
	  }
	  
	  /*
	    max-width does not seem to work in small screen?
	  */
	  
	  /*@media screen and (max-width: 768px) {
	    .native-toast:not(.native-toast-edge) {
	      max-width: 400px;
	    }
	  }
	  
	  @media screen and (max-width: 468px) {
	    .native-toast:not(.native-toast-edge) {
	      max-width: 300px;
	    }
	  }*/
	  
	  /* types */
	  
	  .native-toast-error {
	    background-color: #d92727;
	    color: white;
	  }
	  
	  .native-toast-success {
	    background-color: #62a465;
	    color: white;
	  }
	  
	  .native-toast-warning {
	    background-color: #fdaf17;
	    color: white;
	  }
	  
	  .native-toast-info {
	    background-color: #5060ba;
	    color: white;
	  }
	  
	  [class^="native-toast-icon-"] {
	    vertical-align: middle;
	    margin-right: 8px
	  }
	  
	  [class^="native-toast-icon-"] svg {
	    width: 16px;
	    height: 16px;
	  }
  </style>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }

    #map-styles .input-item {
      height: 2rem;
    }

    #map-styles .input-item span{
      display: inline-block;
      width: 4rem;
    }

    #map-styles .input-item .input-text {
      color: #0288d1;
      margin-left: 1rem;
      margin-right: 0rem;
      width: 6rem;
    }
	
	.input-card-top {
		display: flex;
		flex-direction: column;
		min-width: 0;
		word-wrap: break-word;
		background-color: #fff;
		background-clip: border-box;
		border-radius: .25rem;
		width: 22rem;
		border-width: 0;
		border-radius: 0.4rem;
		box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
		position: fixed;
		top: 1rem;
		left: 1rem;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		padding: 0.75rem 1.25rem;
	}
	
	.input-card-left {
		display: flex;
		flex-direction: column;
		min-width: 0;
		word-wrap: break-word;
		background-color: #fff;
		background-clip: border-box;
		border-radius: .25rem;
		width: 30rem;
		border-width: 0;
		border-radius: 0.4rem;
		box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
		position: fixed;
		bottom: 2rem;
		left: 1rem;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		padding: 0.75rem 1.25rem;
	}
	.input-textarea{
	   color:grey;
	   height:8em;
	   overflow:auto;
	   border-radius:0.4rem;
	   border:1px solid #ced4da;
	   margin-bottom:1rem;
	}
  </style>
</head>

<body>
  <div id="container"></div>
  <div id="demoContainer" class="input-card-top" style="width:16rem;">
		<h4>能碳驾驶舱操作demo</h4>
		<div class="input-item">
			<input type='radio' name='tan' value='areaTan' onclick="switchToArea()">
			<span>区域碳排</span>
		</div>
		<div class="input-item">
			<input type='radio' name='tan' value='buildingTan' checked onclick="switchToBuildings()">
			<span>建筑碳排</span>
		</div>
		<div class="input-item">
			<input type='radio' name='tan' value='trafficTan' onclick="switchToRoads()">
			<span>交通碳排</span>
		</div>
		<div class="input-item">
			<input type='radio' name='tan' value='municipalTan' onclick="switchmunicipal()">
			<span>市政碳排</span>
		</div>
		<div class="input-item">
			<input type='radio' name='tan' value='parkTan' onclick="switchToGreens()">
			<span>绿地碳汇</span>
		</div>
  </div>
  <div id="mapStyleContainer" class="input-card" style="width:16rem;display: none;">
    <h4>地图样式</h4>
    <div id="map-styles">
      <div class="input-item">
        <input type='radio' name='mapStyle' value='normal'>
        <span>标准</span>
        <span class="input-text">normal</span>
      </div>
      <div class="input-item"><input type='radio' name='mapStyle' value='dark'><span>幻影黑</span><span class="input-text">dark</span></div>
      <div class="input-item"><input type='radio' name='mapStyle' value='light'><span>月光银</span><span class="input-text">light</span></div>
      <div class="input-item"><input type='radio' name='mapStyle' value='whitesmoke'><span>远山黛</span><span class="input-text">whitesmoke</span></div>
      <div class="input-item"><input type='radio' name='mapStyle' value='fresh'><span>草色青</span><span class="input-text">fresh</span></div>
      <div class="input-item"><input type='radio' name='mapStyle' value='grey' checked><span>雅士灰</span><span class="input-text">grey</span></div>
      <div class="input-item"><input type='radio' name='mapStyle' value='graffiti'><span>涂鸦</span><span class="input-text">graffiti</span></div>
      <div class="input-item"><input type='radio' name='mapStyle' value='macaron'><span>马卡龙</span><span class="input-text">macaron</span></div>
      <div class="input-item"><input type='radio' name='mapStyle' value='blue'><span>靛青蓝</span><span class="input-text">blue</span></div>
      <div class="input-item"><input type='radio' name='mapStyle' value='darkblue'><span>极夜蓝</span><span class="input-text">darkblue</span></div>
      <div class="input-item"><input type='radio' name='mapStyle' value='wine'><span>酱籽</span><span class="input-text">wine</span></div>
    </div>
  </div>
	
	<div id="drawPoliesContainer" class="input-card" style='width: 24rem;display:none;'>
		<div contenteditable="true" class="input-textarea" id="drawCoordsResults">
			
		</div>
		<div class="input-item">
			<input type="radio" name='func' value='marker'><span class="input-text">画点</span>
			<input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>
			<!-- <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span> -->
		</div>
		<!-- <div class="input-item">
			<input type="radio" name='func' value='rectangle'><span class="input-text">画矩形</span>
			<input type="radio" name='func' value='circle'><span class="input-text">画圆</span>
		</div> -->
		<div class="input-item">
			<input id="clear" type="button" class="btn" value="清除" onclick="clearDraw()" />
		</div>
	</div>
	
	<div id="coordTransformContainer" class="input-card" style="top:1rem;height:30rem;display: none;">
		<div>
			<span>原坐标系：</span>
			<select id="coordType">
				<option value="baidu">百度</option>
				<option value="mapbar">图吧</option>
				<option value="gps">GPS</option>
			</select>
			<div contenteditable="true" class="input-textarea" id="inputCoords">
				113.212,23.2385
			</div>
		</div>
		<div>
			<span>转换后的结果：</span>
			<div contenteditable="true" class="input-textarea" id="afterTransCoords">
				
			</div>
			<button onclick="doTransform()">转换</button>
		</div>
	</div>
	
	<div class="input-card-left" style="bottom: 10rem;width: 10rem;background: none;">
		<button onclick="mapReset()">地图复位</button>
	</div>
	
	<div class="input-card-left">
		<h4>功能区</h4>
		<div class="input-item">
			<input type="radio" name='maptools' checked="" value='demo' onclick="showFuncWindow(this)"><span class="input-text">demo</span>
			<input type="radio" name='maptools' value='mapStyle' onclick="showFuncWindow(this)"><span class="input-text">地图样式</span>
			<input type="radio" name='maptools' value='mapDraw' onclick="showFuncWindow(this)"><span class="input-text">绘制</span>
			<input type="radio" name='maptools' value='coordTransform' onclick="showFuncWindow(this)"><span class="input-text">坐标转换</span>
		</div>
	</div>
  <script>
	  window._AMapSecurityConfig = {
	  	securityJsCode:'7673c5f311925eee9fd8615497104e9d'
	  }
  </script>
  <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
	<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
  <script src="//webapi.amap.com/maps?v=2.0&key=9eec641732e5078ac1c8bf570e235801&plugin=Map3D,AMap.MouseTool"></script>
  <script src="https://webapi.amap.com/loca?v=2.0.0&key=9eec641732e5078ac1c8bf570e235801"></script>
	<script>
		var baidu_coords = [113.96064,22.526835,
          113.960541,22.525984,
          113.960487,22.5256,
          113.960353,22.524582,
          113.960335,22.524106,
          113.960281,22.523689,
          113.960254,22.52353,
          113.960128,22.522813,
          113.959931,22.521294,
          113.959823,22.5204,
          113.959751,22.52035,
          113.959481,22.518356,
          113.959284,22.517237,
          113.959194,22.516826,
          113.958983,22.515726,
          113.958839,22.51505,
          113.958695,22.514341,
          113.958731,22.514299,
          113.958668,22.514015,
          113.958318,22.511929,
          113.958228,22.510794,
          113.958067,22.510343,
          113.957707,22.510209,
          113.956288,22.510226,
          113.95494,22.510243,
          113.952659,22.510209,
          113.950629,22.51036,
          113.949569,22.510543,
          113.948248,22.510481,
          113.948006,22.510447,
          113.947242,22.510447,
          113.945338,22.51043,
          113.944026,22.510397,
          113.944116,22.511758,
          113.944075,22.512845,
          113.94403,22.514502,
          113.944017,22.515057,
          113.944026,22.515324,
          113.943963,22.515474,
          113.943963,22.515624,
          113.944022,22.515799,
          113.944098,22.515866,
          113.944143,22.516037,
          113.944228,22.516388,
          113.944385,22.516789,
          113.94465,22.517519,
          113.94479,22.51794,
          113.945055,22.518783,
          113.945041,22.518871,
          113.945037,22.518909,
          113.944992,22.51895,
          113.944727,22.519038,
          113.944327,22.519176,
          113.944152,22.519205,
          113.943483,22.51938,
          113.941488,22.519898,
          113.940276,22.52019,
          113.940235,22.520206,
          113.940213,22.520177,
          113.9401,22.520198,
          113.939647,22.520311,
          113.939534,22.520344,
          113.939458,22.520352,
          113.938874,22.520432,
          113.938362,22.520448,
          113.938048,22.520453,
          113.937828,22.520478,
          113.937194,22.520478,
          113.936049,22.520461,
          113.93525,22.520453,
          113.934634,22.520448,
          113.934508,22.520428,
          113.934338,22.520419,
          113.934212,22.520419,
          113.933898,22.520415,
          113.93379,22.520394,
          113.933278,22.520411,
          113.93339,22.520928,
          113.933359,22.520958,
          113.93335,22.520983,
          113.933466,22.521279,
          113.933538,22.521483,
          113.933642,22.521776,
          113.933866,22.522268,
          113.934473,22.523795,
          113.934522,22.524021,
          113.934567,22.5241,
          113.934755,22.524546,
          113.934872,22.52483,
          113.934881,22.524855,
          113.93516,22.525531,
          113.935564,22.526766,
          113.935663,22.527676,
          113.935847,22.528676,
          113.936853,22.528548,
          113.937706,22.528356,
          113.938497,22.528081,
          113.939207,22.527922,
          113.939737,22.527881,
          113.939925,22.527789,
          113.941264,22.527655,
          113.941839,22.527639,
          113.943042,22.527605,
          113.943033,22.527611,
          113.943015,22.527614,
          113.943334,22.52768,
          113.943676,22.52768,
          113.946335,22.52768,
          113.949048,22.527647,
          113.949766,22.52758,
          113.950395,22.52738,
          113.952084,22.527346,
          113.954689,22.527313,
          113.956432,22.527313,
          113.957887,22.527213,
          113.959306,22.527096,
          113.960636,22.526848
					];
		// 后海边界坐标
		
		var houhai_area_results = [];
		
		var buildings = [
			{
				'name': '深圳湾安达仕酒店',
				'coord': [113.947196, 22.515052]
			},
			{
				'name': '中国华润大厦（春笋）',
				'coord': [113.946442,22.514893]
			}
		];
		
		// 注意这里面坐标是百度坐标系，用之前转成高德坐标系
		var roads = [
			{
				'name': '滨海大道',
				'coord': [[113.936025,22.528248],
          [113.940337,22.52758],
          [113.960459,22.526646]]
			},
			{
				'name': '沙河西路',
				'coord': [[113.960558,22.526767],
          [113.958115,22.51091],
          [113.958115,22.510977]]
			},
			{
				'name': '海德三道（后海大道以东）',
				'coord': [[113.939964,22.525262],
          [113.947438,22.52446],
          [113.952253,22.523325],
          [113.954912,22.52199],
          [113.959655,22.521256]]
			},
			{
				'name': '科苑南路',
				'coord': [[113.952469,22.527163],
          [113.952505,22.525094],
          [113.952289,22.523391],
          [113.950277,22.515946],
          [113.950241,22.510805]]
			},
			{
				'name': '文心五路',
				'coord': [[113.944204,22.527046],
          [113.943971,22.524893],
          [113.943629,22.523374],
          [113.943072,22.521454],
          [113.942569,22.519651],
          [113.942569,22.519635]]
			},
			{
				'name': '南海大道',
				'coord': [[113.933609,22.520645],
          [113.933717,22.521613],
          [113.935118,22.525119],
          [113.935729,22.526487],
          [113.936016,22.528123]]
			},
			{
				'name': '海德一道',
				'coord': [[113.951118,22.519544],
          [113.94721,22.52047],
          [113.945899,22.520779],
          [113.939143,22.522356],
          [113.935649,22.522131],
          [113.934292,22.522598]]
			},
			{
				'name': '后海大道',
				'coord': [[113.939125,22.52052],
          [113.939157,22.522373],
          [113.939166,22.522373],
          [113.939269,22.523946],
          [113.940208,22.527335]]
			}
		];
		
		var parks = [
			{
				'name': '深圳人才公园',
				'coord': [[113.95935,22.521237],
          [113.959619,22.521004],
          [113.95926,22.518016],
          [113.959044,22.516797],
          [113.958703,22.515311],
          [113.958541,22.514527],
          [113.958344,22.514293],
          [113.957661,22.511054],
          [113.950546,22.510904],
          [113.950403,22.511038],
          [113.950367,22.515745],
          [113.950924,22.515745],
          [113.951013,22.515712],
          [113.951193,22.515712],
          [113.951445,22.515745],
          [113.951858,22.515896],
          [113.952109,22.516062],
          [113.952217,22.516229],
          [113.952307,22.516413],
          [113.952325,22.51658],
          [113.952828,22.517999],
          [113.953116,22.518867],
          [113.953565,22.519318],
          [113.954014,22.519651],
          [113.954337,22.520152],
          [113.954876,22.521922],
          [113.959332,22.521271],
          [113.959332,22.521271],
          [113.959332,22.521271]]
			},
			{
				'name': '文心公园（南山）',
				'coord': [[113.937359,22.527047],
          [113.937395,22.527005],
          [113.937651,22.526934],
          [113.937723,22.526867],
          [113.937485,22.525958],
          [113.937422,22.525954],
          [113.936047,22.526271],
          [113.936267,22.526913],
          [113.936218,22.527068],
          [113.936218,22.527135],
          [113.936267,22.52731],
          [113.936339,22.527452],
          [113.936416,22.527556],
          [113.9366,22.527694],
          [113.936685,22.527723],
          [113.936766,22.527719],
          [113.936815,22.52774],
          [113.937345,22.527664],
          [113.937377,22.527623],
          [113.93739,22.527602],
          [113.937399,22.527548],
          [113.937404,22.527473],
          [113.937426,22.527439],
          [113.937363,22.527055],
          [113.937359,22.527055],
          [113.937359,22.527055],
          [113.937359,22.527055]]
			},
			{
				'name': '海德苑社区公园',
				'coord': [[113.946374,22.525158],
          [113.947249,22.525099],
          [113.947182,22.524736],
          [113.947146,22.52469],
          [113.94698,22.524649],
          [113.946333,22.52472],
          [113.946369,22.525154],
          [113.946369,22.525154],
          [113.946369,22.525154]]
			},
			{
				'name': '东滨社区公园',
				'coord': [[113.944726,22.51181],
          [113.944852,22.511797],
          [113.945036,22.51181],
          [113.945862,22.51181],
          [113.94588,22.511008],
          [113.94584,22.510908],
          [113.944618,22.510883],
          [113.944546,22.510954],
          [113.944542,22.511021],
          [113.944492,22.511084],
          [113.94451,22.511651],
          [113.944596,22.51178],
          [113.944717,22.51181],
          [113.944717,22.51181],
          [113.944717,22.51181],
          [113.944717,22.51181]]
			}
		]
		
		function doTransform() {
			var inputs = document.getElementById('inputCoords').textContent;
			var coordType = document.getElementById('coordType').value;
			if (inputs && inputs.length > 0) {
				var inputPoints = coordStringToAmapLngLatPoints(inputs.split(','));
				convertFrom(inputPoints, coordType, function (results) {
					if (results) {
						var arr = [];
						for (var i = 0; i < results.length; i ++) {
							arr.push(results[i].getLng() + ',' + results[i].getLat());
						}
						document.getElementById('afterTransCoords').textContent = arr.join(',')
					}
				});
			}
		}
		
		// 转成高德地图后的道路坐标
		var amap_roads = [];
		
		//后海中心点
		var houhai_center = [113.942498,22.518422];
		
		var areaDrawColor = '#4682B480';//rgba
		
		// api v2.0没有了Object3Dlayer
		// var object3Dlayer = new Object3DLayer();
		//初始化地图
		var map = new AMap.Map('container', {
			resizeEnable: true, //是否监控地图容器尺寸变化
			mapStyle: "amap://styles/grey",
			// mask: bounds,//区域掩膜，只显示指定区域
			center: houhai_center,
			showLabel:false,
			features:['bg','point','road'],
			zooms: [15.5, 20],
			skyColor: 'rgba(26,35,44,1)',
			// features:['bg','road'],
			pitch:50, // 地图俯仰角度，有效范围 0 度- 83 度
			viewMode:'3D' // 地图模式
		});
		
		map.plugin(["AMap.ControlBar"], function() {
			var controlBar = new AMap.ControlBar({
				position: {
						top: '10px',
						right: '10px'
				},
				showZoomBar: false,
				showControlButton: true,
				showDirection: true
			});
			map.addControl(controlBar);
		});
		
		function mapReset() {
			fitMap(houhai_area_results);
		}
		
		var mouseTool = new AMap.MouseTool(map);
		//监听draw事件可获取画好的覆盖物
		mouseTool.on('draw',function(e){
			overlays.push(e.obj);
			var coords = document.getElementById('drawCoordsResults').innerText.trim();
			if (e.obj.CLASS_NAME == "AMap.Marker") {
				var point = e.obj.getPosition();
				if (coords.length == 0) {
					coords += point.getLng() + ',' + point.getLat()
				} else {
					coords += ',' + point.getLng() + ',' + point.getLat()
				}
			} else {
				var path = e.obj.getPath();
				for (var i = 0; i < path.length; i ++) {
					coords += ',' + path[i].getLng() + ',' + path[i].getLat()
				}
				if (coords.startsWith(',')) {
					coords = coords.substring(1);
				}
			}
			document.getElementById('drawCoordsResults').innerText = coords;
		});
		
		function showFuncWindow(el) {
			mouseTool.close(true);
			if (el.value == 'demo') {
				document.getElementById('demoContainer').style.display = 'block';
				document.getElementById('mapStyleContainer').style.display = 'none';
				document.getElementById('drawPoliesContainer').style.display = 'none';
				document.getElementById('coordTransformContainer').style.display = 'none';
			} else if (el.value == 'mapStyle') {
				document.getElementById('demoContainer').style.display = 'none';
				document.getElementById('mapStyleContainer').style.display = 'block';
				document.getElementById('drawPoliesContainer').style.display = 'none';
				document.getElementById('coordTransformContainer').style.display = 'none';
			} else if (el.value == 'mapDraw') {
				document.getElementById('demoContainer').style.display = 'none';
				document.getElementById('mapStyleContainer').style.display = 'none';
				document.getElementById('drawPoliesContainer').style.display = 'block';
				document.getElementById('coordTransformContainer').style.display = 'none';
				beginDraw();
			} else {
				document.getElementById('demoContainer').style.display = 'none';
				document.getElementById('mapStyleContainer').style.display = 'none';
				document.getElementById('drawPoliesContainer').style.display = 'none';
				document.getElementById('coordTransformContainer').style.display = 'block';
			}
		}
		
		var overlays = [];
		function beginDraw() {
			mouseTool.close(false);
			var radios = document.getElementsByName('func');
			for(var i=0;i<radios.length;i+=1){
				if (radios[i].checked) {
					draw(radios[i].value)
				}
				radios[i].onclick = function(e){
					draw(e.target.value)
				}
			}
		}
		
		function draw(type){
			switch(type){
				case 'marker':{
						mouseTool.marker({
							//同Marker的Option设置
						});
						break;
				}
				case 'polyline':{
						mouseTool.polyline({
							strokeColor:'#80d8ff'
							//同Polyline的Option设置
						});
						break;
				}
				// case 'polygon':{
				// 		mouseTool.polygon({
				// 			fillColor:'#00b0ff',
				// 			strokeColor:'#80d8ff'
				// 			//同Polygon的Option设置
				// 		});
				// 		break;
				// }
				// case 'rectangle':{
				// 		mouseTool.rectangle({
				// 			fillColor:'#00b0ff',
				// 			strokeColor:'#80d8ff'
				// 			//同Polygon的Option设置
				// 		});
				// 		break;
				// }
				// case 'circle':{
				// 		mouseTool.circle({
				// 			fillColor:'#00b0ff',
				// 			strokeColor:'#80d8ff'
				// 			//同Circle的Option设置
				// 		});
				// 		break;
				// }
			}
		}
		
		function clearDraw() {
			map.remove(overlays)
			overlays = [];
			document.getElementById('drawCoordsResults').innerText = '';
		}
		
		
		function coordStringToAmapLngLatPoints(strings) {
			var path = [];
			for (var i = 0; i < strings.length; i+=2) {
				var x = strings[i];
				var y = strings[i + 1];
				path.push(new AMap.LngLat(x, y))
			}
			return path;
		}
		
		
		// map.on('click', function(event) {
		// 	var lnglat = event.lnglat;
		// })
		
		map.on('complete', function(){
			var baidu_path = coordStringToAmapLngLatPoints(baidu_coords)
			convertFrom(baidu_path, 'baidu', function (results) {
				houhai_area_results = results;
				createAreaFence();
				createBuilding();
				customBuildingsBlock = new AMap.Polygon({
					bubble:true,
					fillOpacity:0.05,
					// strokeOpacity: 0.4,
					strokeWeight:0,
					// strokeColor: 'blue',
					fillColor:'#0081FF',
					path:houhai_area_results
				});
				drawHouhaiArea();
				fitMap(houhai_area_results);
				switchToBuildings();
			});
		});
		
		map.on('click', function() {
			if (roadsPolylines.length > 0) {
				for (var i = 0; i < roadsPolylines.length; i ++) {
					if (event.target != roadsPolylines[i]) {
						roadsPolylines[i].setOptions({
							strokeColor: "#2B427E",
							strokeOpacity: 1,
							zIndex: 50
						});
					}
				}
			}
		});
		
		var loca,outLayer;
		function createAreaFence() {
			loca = new Loca.Container({
			    map
			});
			// 围栏
			outLayer = new Loca.PolygonLayer({
			    zIndex: 20,
			    cullface: 'none',
			    shininess: 1,
			    hasBottom: false,
			    blockHide: false,
			    hasSide: true,
			    hasTop: false,
			    depth: true
			});
			
			var coords = [];
			for (var i = 0; i < houhai_area_results.length; i ++) {
				coords.push([houhai_area_results[i].getLng(), houhai_area_results[i].getLat()]);
			}
			var geoSource = new Loca.GeoJSONSource({
				'data': {
					"type": "FeatureCollection",
					"name": "out",
					"features": [
							{
									"type": "Feature",
									"properties": {},
									"geometry": {
											"type": "Polygon",
											"coordinates": [
												coords
											]
									}
							}
					]
				}
			});
			outLayer.setSource(geoSource);
			outLayer.setStyle({
			    topColor: function (index, feature) {
			        return 'rgba(1,90,255,0)';
			    },
			    sideTopColor: function (index, feature) {
			        // return 'rgba(1,90,255,0)';
							return 'rgba(1,90,255,0)';
			    },
			    sideBottomColor: function (index, feature) {
			        return 'rgba(1,90,255,0.6)';
			    },
					bottomColor: function (index, feature) {
			        return 'rgba(255,0,255,1)';
			    },
			    height: 50,
			    altitude: 0,
			});
		}
		
		// 绘制后海区域立体边界，并添加鼠标事件
		function drawHouhaiArea() {
			loca.add(outLayer);
			map.add(customBuildingsBlock);
			buildingLayer.setMap(map);
		}
		
		//根据指定的坐标集合地图自适应，缩放到合适的级别
		function fitMap(lnglats) {
			var paddingValue = 0;
			var bounds = new AMap.Polyline({
				path: lnglats
			}).getBounds();
			// map.setFitView(bounds);
			map.setBounds(bounds);
			//限制在后海区域范围内滑动
			// map.setLimitBounds(bounds);
		}
		
		// 根据坐标获得范围，padding为边距
		function getBoundsFromCoordinates(lnglats, padding) {
			// 计算西南角和东北角的经纬度
			var southwest = new AMap.LngLat(Math.min.apply(null, lnglats.map(l => l.getLng())), Math.min.apply(null, lnglats.map(l => l.getLat())));
			var northeast = new AMap.LngLat(Math.max.apply(null, lnglats.map(l => l.getLng())), Math.max.apply(null, lnglats.map(l => l.getLat())));
	
			var deltaX = northeast.getLng() - southwest.getLng();
			var deltaY = northeast.getLat() - southwest.getLat();
				
			var newSouthwest = new AMap.LngLat(southwest.getLng() - deltaX * padding[3], southwest.getLat() - deltaY * padding[2]);
			var newNortheast = new AMap.LngLat(northeast.getLng() + deltaX * padding[1], northeast.getLat() + deltaY * padding[0]);
				
			return new AMap.Bounds(newSouthwest, newNortheast);
		}
		
		var buildingLayer = new AMap.Buildings({zIndex:130, merge:false, sort:false, zooms:[2,20]});
		var roadsPolylines = [];
		var greenPolygons = [];
		var customBuildingsBlock;
		var markers = [];
		function createBuilding() {
			var coords = [];
			for (var i = 0; i < houhai_area_results.length; i ++) {
				coords.push([houhai_area_results[i].getLng(), houhai_area_results[i].getLat()])
			}
			var options = {
				hideWithoutStyle: true,//是否隐藏设定区域外的楼块
				areas:[{ //围栏1
					visible: true,//是否可见
					rejectTexture:true,//是否屏蔽自定义地图的纹理
					// color1: 'CCF8F8F8',//高德自带风格楼块
					// color2: 'CCEEEEEE',
					//百度自带风格楼块
					color1: 'DE5A7486',//楼顶颜色
					color2: 'DE282D35',//楼面颜色
					// color1: 'rgba(24,212,255,1)',
					// color2: 'rgba(13,43,90,1)',
					path: coords
				}]
			};
			buildingLayer.setStyle(options);
		}
		
		function clearMap() {
			// object3Dlayer.clear();
			// map.remove(object3Dlayer);
			map.remove(markers);
			if (customBuildingsBlock) {
				map.remove(customBuildingsBlock);
			}
			loca.remove(outLayer);
			if (buildingLayer) {
				map.remove(buildingLayer);
			}
			map.remove(roadsPolylines);
			map.remove(greenPolygons);
		}
		
		function switchToArea() {
			clearMap();
			drawHouhaiArea();
			buildingLayer.setMap(map);
			fitMap(houhai_area_results);
		}
		
		function switchToBuildings() {
			clearMap();
			drawHouhaiArea();
			map.setZoomAndCenter(16.5, [113.941377,22.512808]);
			// fitMap(houhai_area_results);
			map.add(customBuildingsBlock);
			buildingLayer.setMap(map);
			
			
			
			
			
			buildings.map(function(item,index,arr) {
				var marker = new AMap.Marker({
					icon: "img/building_point.svg",
					position: item.coord,
					offset: new AMap.Pixel(-13, -30)
				});
				marker.setMap(map);
				marker.on('click', function () {
					alert(item.name);
				})
				markers.push(marker);
			});
		}
		
		// 获取Polyline上的插值点
		function getInterpolatedPoint(path, fraction) {
				var totalDistance = AMap.GeometryUtil.distanceOfLine(path);
				var targetDistance = fraction * totalDistance;

				var accumulatedDistance = 0;
				var lastPoint = path[0];

				for (var i = 1; i < path.length; i++) {
						var segmentStart = path[i - 1];
						var segmentEnd = path[i];

						var segmentDistance = AMap.GeometryUtil.distance(segmentStart, segmentEnd);

						if (accumulatedDistance + segmentDistance >= targetDistance) {
								var remainingDistance = targetDistance - accumulatedDistance;
								var fractionOfSegment = remainingDistance / segmentDistance;

								var interpolatedLng = (1 - fractionOfSegment) * segmentStart.lng + fractionOfSegment * segmentEnd.lng;
								var interpolatedLat = (1 - fractionOfSegment) * segmentStart.lat + fractionOfSegment * segmentEnd.lat;

								return new AMap.LngLat(interpolatedLng, interpolatedLat);
						}

						accumulatedDistance += segmentDistance;
						lastPoint = segmentEnd;
				}

				return lastPoint;
		}
		
		function switchToRoads() {
			clearMap();
			roadsPolylines = [];
			// 高德坐标转换函数有并发限制，所以这样处理下
			var lengthArray = [];
			var roadCoordString = [];
			for (var i = 0; i < roads.length; i ++) {
				var roadCoords = roads[i].coord;
				lengthArray.push(roadCoords.length);
				for (var j = 0; j < roadCoords.length; j ++) {
					roadCoordString.push(roadCoords[j][0]);
					roadCoordString.push(roadCoords[j][1]);
				}
			}
			var coords = coordStringToAmapLngLatPoints(roadCoordString);
			convertFrom(coords, 'baidu', function(results) {
				var startIndex = 0;
				for (var i = 0; i < lengthArray.length; i ++) {
					var len = lengthArray[i];
					var linePoints = [];
					var end = startIndex + len;
					for (var j = startIndex; j < end; j ++){
						linePoints.push(results[j]);
					}
					startIndex = j;
					var line = new AMap.Polyline({
					  path: linePoints,
					  strokeColor: "#2B427E",
					  strokeWeight: 6,
					  strokeOpacity: 1,
					  zIndex: 50,
					  bubble: false,
					});
					line.on('click', function(event) {
						var maxIndex = getMaxZIndex();
						event.target.setOptions({
							strokeColor: "#2B427E",
							zIndex: maxIndex + 1,
							strokeOpacity: 1
						});
						for (var i = 0; i < roadsPolylines.length; i ++) {
							if (event.target != roadsPolylines[i]) {
								roadsPolylines[i].setOptions({
									strokeColor: '#2B427E',
									strokeOpacity: 0.5,
									zIndex: 50
								});
							}
						}
					});
					var marker = new AMap.Marker({
						position: getInterpolatedPoint(linePoints, 0.5),
						icon: "img/road_point.svg",
						// content: "<div style='color:white;width: 200px;'>" + roads[i].name + "</div>",
						offset: new AMap.Pixel(-17, -42), // 调整标记位置
					});
					map.add(marker);
					markers.push(marker);
					// line.on('mouseover', function(event) {
					// 	event.target.setOptions({
					// 		strokeOpacity: 0.6
					// 	})
					// });
					// line.on('mouseout', function(event) {
					// 	event.target.setOptions({
					// 		strokeOpacity: 1
					// 	})
					// });
					roadsPolylines.push(line);
				}
				map.add(roadsPolylines);
				map.setFitView(roadsPolylines);
			});
		}
		
		// 获取数组中Polyline的最高zIndex
		function getMaxZIndex() {
				var maxZIndex = -Infinity;
				roadsPolylines.forEach(function(polyline) {
						var zIndex = polyline.getOptions().zIndex;
						if (zIndex > maxZIndex) {
								maxZIndex = zIndex;
						}
				});
				return maxZIndex;
		}
		
		function switchmunicipal() {
			clearMap();
			drawHouhaiArea();
			map.add(customBuildingsBlock);
			buildingLayer.setMap(map);
			fitMap(houhai_area_results);
		}
		
		function switchToGreens() {
			clearMap();
			drawHouhaiArea();
			map.remove(buildingLayer);
			greenPolygons = [];
			// customBuildingsBlock = new AMap.Polygon({
			// 	bubble:true,
			// 	fillOpacity:0.0,
			// 	strokeWeight:1,
			// 	fillColor:'blue',
			// 	path:houhai_area_results,
			// 	map:map
			// });
			// 高德坐标转换函数有并发限制，所以这样处理下
			var lengthArray = [];
			var greenCoordString = [];
			for (var i = 0; i < parks.length; i ++) {
				var greenCoords = parks[i].coord;
				lengthArray.push(greenCoords.length);
				for (var j = 0; j < greenCoords.length; j ++) {
					greenCoordString.push(greenCoords[j][0]);
					greenCoordString.push(greenCoords[j][1]);
				}
			}
			var coords = coordStringToAmapLngLatPoints(greenCoordString);
			convertFrom(coords, 'baidu', function(results) {
				var startIndex = 0;
				for (var i = 0; i < lengthArray.length; i ++) {
					var len = lengthArray[i];
					var linePoints = [];
					var end = startIndex + len;
					for (var j = startIndex; j < end; j ++){
						linePoints.push(results[j]);
					}
					startIndex = j;
					var polygon = new AMap.Polygon({
					  path: linePoints,
						fillColor: "#328920",
					  strokeColor: "#328920",
					  borderWeight: 1,
					  strokeOpacity: 0.6,
						fillOpacity: 0.6,
					  zIndex: 50,
					  bubble: true,
					});
					var marker = new AMap.Marker({
						position: polygon.getBounds().getCenter(),
						icon: "img/park_point.svg",
						offset: new AMap.Pixel(-17, -42), // 调整标记位置
					});
					map.add(marker);
					markers.push(marker);
					// polygon.on('mouseover', function(event) {
					// 	event.target.setOptions({
					// 		fillOpacity: 1
					// 	})
					// });
					// polygon.on('mouseout', function(event) {
					// 	event.target.setOptions({
					// 		fillOpacity: 0.6
					// 	})
					// });
					greenPolygons.push(polygon);
				}
				map.add(greenPolygons);
				map.setFitView(greenPolygons);
			});
		}
		
		// 计算坐标数组的中心点
		function calculateCenter(coords) {
		  var totalLng = 0;
		  var totalLat = 0;
		
		  coords.forEach(function (coord) {
		    totalLng += coord.getLng();
		    totalLat += coord.getLat();
		  });
		
		  var centerLng = totalLng / coords.length;
		  var centerLat = totalLat / coords.length;
		
		  return [centerLng, centerLat];
		}
		
		// var geocoder = new AMap.Geocoder({
		// 	city: "0755", //城市设为深圳
		// });
		// function geoCode() {
		// 	var address  = '华润瑞府';
		// 	geocoder.getLocation(address, function(status, result) {
		// 		if (status === 'complete'&&result.geocodes.length) {
		// 				var lnglat = result.geocodes[0].location
		// 				console.log(result);
		// 		}else{
		// 				log.error('根据地址查询位置失败');
		// 		}
		// 	});
		// }

		//绑定radio点击事件
		var radios = document.querySelectorAll("#map-styles input");
		radios.forEach(function(ratio) {
			ratio.onclick = setMapStyle;
		});

		function setMapStyle() {
			var styleName = "amap://styles/" + this.value;
			map.setMapStyle(styleName);
		}
		
		// 坐标转换
		function convertFrom(lnglat, type, callback){
			AMap.convertFrom(lnglat, type, function (status, result) {
				if (result.info === 'ok') {
					var results = result.locations;
					callback(results)
				} else {
					callback()
					console.log(result)
				}
			});
		}
  </script>
</body>

</html>